<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生画像管理界面</title>
</head>
<body>
{# 导航栏 #}
{% include 'component/navbar.html' %}

{# 学生画像信息展示表格bootstrap3.4.1版本 #}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <table class="table table-bordered">
                <thead>
                <tr>
                    {% for column in columns %}
                        <td style="text-align: center">{{ column }}</td>
                    {% endfor %}
                    <td>operation</td>
                </tr>
                </thead>
                <tbody>
                {% for stu in datas %}
                    <tr>
                        <td style="text-align: center">{{ stu.stu_id }}</td>
                        <td style="text-align: center">{{ stu.stu_name }}</td>
                        <td style="text-align: center">{{ stu.course_name }}</td>
                        <td style="text-align: center">{{ stu.com_grade }}</td>
                        <td style="text-align: center">{{ stu.end_grade }}</td>
                        <td style="text-align: center">{{ stu.total_grade }}</td>
                        <td style="text-align: center">{{ stu.grade_point }}</td>
                        <td>
                            <button class="btn btn-success btn-md" onclick="check_portrait(this)">
                                学生画像
                            </button>
                            <button class="btn btn-primary btn-md" onclick="recommend_course(this)">
                                推荐课程
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {#    推荐课程容器#}
        <div class="col-md-4" id='recommend_course_div' style="display: none">
            {# 课程卡片,显示课程标题、教师名字,具有合适的宽高#}
            <div class="jumbotron">
                <div class="card-body">
                    <h2 class="card-title">推荐5个课程比较适合此学生</h2>
                    <div><p class="card-text" id="recommend_course_list"></p></div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    function check_portrait(button) {
        let stu_id = button.parentNode.parentNode.cells[0].innerText;
        window.location.href = `{% url 'portrait' %}?stu_id=${stu_id}`
    }

    function recommend_course(button) {
        let stu_id = button.parentNode.parentNode.cells[0].innerText;
        console.log(stu_id);
        axios.post("{% url 'course_recommend' %}", {stu_id: stu_id}).then(function (response) {
                console.log(response.data.data);
                let recommend_course_list = document.getElementById('recommend_course_list');
                recommend_course_list.innerHTML = "";
                for (let i = 0; i < response.data.data.length; i++) {
                    let course_name = response.data.data[i];
                    let course_card = `<div class="card">
                            <div class="card-body">
                                <p class="card-text" id="recommend_course_list">${course_name}</p>
                            </div>
                        </div>`;
                     let recommend_course_div = document.getElementById('recommend_course_div');
                    recommend_course_list.innerHTML += course_card;
                    recommend_course_div.style.display = "block";

                    //
                    let card_title = recommend_course_div.querySelector('.card-title');
                    card_title.innerText = `推荐5个课程比较适合此学号:${stu_id}`;
                }

            }
        ).catch(function (error) {
            console.log(error);
        });

    }

</script>
{#引入axios#}
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</html>